blob: fe2e5fb2ce1027c56d41b57a48ae96641aad7e8c (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
import { CopyButton } from '@/components/copy-button'
import { ShareUrlButton } from '@/components/share-url-button'
import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import {
Popover,
PopoverContent,
PopoverTrigger,
} from '@/components/ui/popover'
import { env } from '@/lib/env'
import { Group } from '@prisma/client'
import { Share } from 'lucide-react'
type Props = {
group: Group
}
export function ShareButton({ group }: Props) {
const url = `${env.NEXT_PUBLIC_BASE_URL}/groups/${group.id}`
return (
<Popover>
<PopoverTrigger asChild>
<Button size="icon">
<Share className="w-4 h-4" />
</Button>
</PopoverTrigger>
<PopoverContent align="end" className="[&_p]:text-sm flex flex-col gap-3">
<p>
For other participants to see the group and add expenses, share its
URL with them.
</p>
<div className="flex gap-2">
<Input className="flex-1" defaultValue={url} readOnly />
<CopyButton text={url} />
<ShareUrlButton
text={`Join my group ${group.name} on Spliit`}
url={url}
/>
</div>
<p>
<strong>Warning!</strong> Every person with the group URL will be able
to see and edit expenses. Share with caution!
</p>
</PopoverContent>
</Popover>
)
}
|
